<template>
    <div>
        <table ref="table">
            <thead>
                <tr>
                    <th colspan="3">111</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>222</td>
                    <td>222</td>
                    <td>222</td>
                </tr>
                <tr>
                    <td colspan="3">333</td>
                </tr>
                <tr>
                    <td rowspan="3">444</td>
                    <td>444</td>
                    <td>444</td>
                </tr>
                <tr>
                    <td>555</td>
                    <td>555</td>
                </tr>
                <tr>
                    <td>666</td>
                    <td>666</td>
                </tr>
            </tbody>
        </table>
        <div @click="dayin" class="dy">打印</div>


        <lay-button type="normal" radius @click="start">并发请求</lay-button>
        <div>时间段分组 : {{ range.join(',') }}</div>
        <div class="hour">
            <!-- <div v-for="(v, i) in stateArr" :key="i" @click="changeTime(v.value)">{{ v.name }}</div> -->
            <lay-button type="normal" radius v-for="(v, i) in stateArr" :key="i" @click="changeTime(v.value)">{{
                v.name }}</lay-button>
        </div>
        <div class="ranges">
            <div v-for="(v, i) in xuanrData" :key="i" @click="selectFn">{{ v.startTime + '-' + v.EndTime }}</div>
        </div>
    </div>
</template>

<script setup>
import dayjs from 'dayjs';
import { ref, onMounted } from 'vue'
import { getLimitedFetch } from '../utils/bingfa.js'
import { debounce, fill, findIndex } from 'lodash';

var users = [
    { 'user': 'barney', 'active': false },
    { 'user': 'fred', 'active': false },
    { 'user': 'pebbles', 'active': true }
];

let a = findIndex(users, { 'user': 'fred', 'active': false });
console.log(a, '>>>')

const table = ref(null)
const dayin = () => {
    const iframe = document.createElement('iframe');
    iframe.setAttribute('style', 'position: absolute; width: 0; height: 0;');
    document.body.appendChild(iframe);

    const iframeDoc = iframe.contentWindow.document;

    // 获取实际的表格 DOM 元素
    const tableHtml = table.value.outerHTML;

    // 写入表格内容到 iframe 文档
    iframeDoc.write(
        `
        <html>
        <head>
            <style>
                /* 打印时的样式 */
                body { font-family: Arial, sans-serif; }
                table { width: 100%; border-collapse: collapse; }
                th, td { border: 1px solid #000; padding: 8px; }

                /* 隐藏打印页顶部时间 */
                @page {
                    size: auto;   
                    margin: 0;    
                }

                /* 隐藏 about:blank */
                html, body {
                    margin: 0;
                    padding: 10px;
                }
            </style>
        </head>
        <body>
            ${tableHtml}
        </body>
        </html>
    `
    );
    setTimeout(function () {
        iframe.contentWindow.print();
        document.body.removeChild(iframe);
    }, 50);
}


// 开始
const range = ['08:30-14:00', '17:00-20:30']
// 禁止时间
const jinzhi = ['2024/11/15 14:00-2024/11/15 17:30', '2024/11/15 18:30-2024/11/15 21:30']
const selectis = ref(1)
const xuanrData = ref([])
const date = dayjs().format('YYYY/MM/DD ')
const selectTimeRange = ref({})
const stateArr = [
    { name: "1小时", value: 1 },
    { name: "2小时", value: 2 },
    { name: "3小时", value: 3 },
    { name: "4小时", value: 4 }
]




const changeTime = (e) => {
    selectis.value = e
    xuanrData.value = showTime(date, range, selectis.value)
}

const selectFn = (v) => {
    const value = v.target.innerText
    selectTimeRange.value = { startTime: date + value.split('-')[0], endTime: date + value.split('-')[1] }
    console.log(selectTimeRange.value, '>>')


}
// dqTime日期 timeRange时间段 num分组数
const showTime = (dqTime, timeRange, num) => {
    // 可选择时间
    const newD = timeRange.map(e => {
        return {
            startTime: dqTime + e.split('-')[0],
            endTime: dqTime + e.split('-')[1]
        }
    })
    // 禁止时间
    const jinzhiD = jinzhi.map(e => {
        return {
            startTime: e.split('-')[0],
            endTime: e.split('-')[1]
        }
    })
    function pandaun(startTime) {
        let a = false
        jinzhiD?.forEach(e => {
            if (startTime >= e.startTime && startTime <= e.endTime) {
                a = true
            }
        })
        return a
    }
    // 分组
    let sumTimes = [];
    newD?.forEach(e => {
        let diff = dayjs(e.endTime).diff(dayjs(e.startTime), "hour");
        for (let i = 0; i < diff; i++) {
            // 结束时间不能大于限制时间     开始时间不能小于当前时间
            if (e.endTime > dqTime + dayjs(e.startTime).add(i + num, "hour").format("HH:mm") && (dqTime + dayjs(e.startTime).add(i, "hour").format("HH:mm") > dayjs().format('YYYY/MM/DD HH:mm'))) {
                // 判断是否在禁止时间内
                const a = pandaun(dqTime + dayjs(e.startTime).add(i + num, "hour").format("HH:mm"))
                if (!a) {
                    sumTimes.push({ startTime: dayjs(e.startTime).add(i, "hour").format("HH:mm"), EndTime: dayjs(e.startTime).add(i + num, "hour").format("HH:mm") });
                }
            }
        }
    })
    // 返回可选择时间段
    return sumTimes
}



// 假设的异步请求函数
async function fetchData(url) {
    // 模拟网络请求
    return new Promise((resolve) => {
        setTimeout(() => resolve(`Fetched ${url}`), 2000);
    });
}

const start = debounce(
    () => {
        // 创建限制并发的请求函数
        const limitedFetch = getLimitedFetch(fetchData, 2);
        // 需要请求的 URL 列表
        const urls = ['url1', 'url2', 'url3', 'url4', 'url5'];

        // 执行所有请求
        const pros = urls.map(url => {
            return limitedFetch(url)
        })
        Promise.all(pros)
            .then(results => {
                console.log(results); // 打印所有结果
            })
            .catch(error => {
                console.error(error); // 打印错误
            });
    },
    1000
)


</script>

<style lang="scss" scoped>
table {
    width: 600px;
    border: 1px solid #000;
    border-collapse: collapse;
    /* 边框合并 */
}

thead {
    background-color: #fff;
}

th,
td {
    border: 1px solid #000;
    /* 给表头和单元格添加边框 */
    padding: 10px;
    /* 添加一些内边距，让内容更美观 */
}

.dy {
    width: 80px;
    text-align: center;
    background-color: #aaa;
    cursor: pointer;
    margin-bottom: 50px;
}

.hour {
    width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;

    &>div {
        border: 1px solid #000;
        border-radius: 5px;
        cursor: pointer;
        padding: 1px 5px;
        transition: .1s;

        &:hover {
            background-color: #aaa;
            color: #fff;
        }
    }
}

.ranges {
    width: 300px;


    &>div {
        width: 50%;
        text-align: center;
        border: 1px solid #ccc;
        margin: 5px auto;
        line-height: 30px;
        cursor: pointer;
        border-radius: 5px;
        transition: .1s;

        &:hover {
            background-color: #aaa;
            color: #fff;
        }
    }
}
</style>
